<template>
  <div style="height: 5vh">
    <van-pull-refresh
      v-model="pullOption.refreshing"
      @refresh="onRefresh()"
      :immediate-check="false"
    >
      <van-list
        v-model="pullOption.loading"
        :finished="pullOption.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
    <van-sticky>
      <van-search
        v-model="searchForm.keyword"
        @search="onSearch"
        placeholder="请输入搜索关键词"
      />
    </van-sticky>
    <div id="content">
      <van-row v-for="item in pageData.record" :key="item.id" style="margin-top: 1em">
        <van-col span="24">
          <van-card
            currency=" "
            :num="item.articleNum"
            :desc="item.description"
            :title="item.name"
            :thumb="item.avatar"
          />
        </van-col>
      </van-row>
    </div>
    </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  name: "CategoryListHomePage",
  data() {
    return {
      categorys: [],
      searchForm: {
        keyword: "",
        current: 1,
        size: 10
      },
      pullOption: {
        loading: false,
        finished: false,
        refreshing: false,
      },
      pageData:{
        record: []
      }
    };
  },
  methods: {
    onSearch() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });

      this.searchForm.current = 1;
      this.listData().then(Toast.clear());
    },
    
    onLoad() {
      this.pullOption.finished = false;
      this.pullOption.loading = true;
      this.listRequest(this.searchForm).then((res) => {
        if (res.data.data.record.length == 0) {
          this.pullOption.finished = true;
          this.pullOption.loading = false;
          return;
        }
        this.formatLoadData(res.data.data);
        this.pullOption.loading = false;
        this.searchForm.current++;
      });
    },
    formatLoadData(pageData) {
      this.pageData.current = pageData.current;
      this.pageData.size = pageData.size;
      this.pageData.total = pageData.total;
      this.pageData.record.push(...pageData.record);

    },
    onRefresh() {
      this.pullOption.finished = false;
      this.searchForm.current = 1;
      this.pullOption.refreshing = true;
      this.pageData.record.splice(0);
      this.listData().then(() => {
        this.pullOption.refreshing = false;
        this.searchForm.current++;
      });
    },
    listRequest(params) {
      return this.postRequest("/category/list", params);
    },
    listData() {
      return this.listRequest(this.searchForm).then((res) => {
        this.pageData = res.data.data;
        if (this.pageData.record.length == 0) {
          this.pullOption.finished = true;
        }
      });
    },
  },
  created() {
    
  },
};
</script>
<style scoped>
#content {
  width: 90%;
  margin: auto;
}
</style>
<style>
.van-card {
  height: 7em !important;
}
.van-card__bottom {
  margin-bottom: 2em;
}
.van-card__thumb {
  width: 5em;
  height: 5em;
}
.van-card__title {
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 0.6em;
}
</style>
